<template>
    <div>
         <div style="margin-bottom: 5px;">
            <el-input style="width: 200px;" v-model="userid" placeholder="根据用户名查询" ></el-input>
            <el-input style="width: 200px; margin: 5px;" v-model="major" placeholder="根据专业查询"></el-input>
            <!-- <el-input style="width: 200px;margin: 5px;" placeholder="根据角色查询"></el-input> -->
            <el-button type="primary" @click="serch"><el-icon><Search /></el-icon>查询</el-button>
            <el-button type="primary" plain @click="ShowAdduser"><el-icon><Plus /></el-icon>新增</el-button>
            <el-button type="primary" plain><el-icon><Delete /></el-icon>批量删除</el-button>
            <el-button type="success" @click="exportExcel">
            <el-icon><Download /></el-icon>导出 Excel 表格
          </el-button>
         </div>
        <!-- 表格展示数据 -->
        <el-table :data="users" stripe v-loading="loading"
        :style="{ width: '1200px' , height:'500px',}" 
        style="margin-top: 3%;"
        :header-cell-style="{backgroundColor:'aliceblue',color:'#666'}" >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="学号" width="120px" />
            <el-table-column prop="username" label="用户名" width="100px"/>
            <el-table-column prop="state" label="激活状态" width="100px">
                <template #default="scope">
                    {{ scope.row.state === 1 ? '已激活' : (scope.row.state === 0 ? '未激活' : '已删除') }}
                </template>
            </el-table-column>
            <el-table-column prop="phone" label="电话号码"/>
            <el-table-column prop="identity" label="身份证号"/>
            <el-table-column prop="college" label="学院" />
            <el-table-column prop="major" label="专业" width="100px"/>
            <el-table-column  label="操作" width="200px">
                <template #default="scope">
                     <el-button type="primary" plain><el-icon><EditPen /></el-icon>编辑</el-button>
                     <el-button type="danger" plain @click="DeleteUsers(scope.row)"><el-icon><Delete /></el-icon>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog v-model="show" title="删除确认">
        <main>确定要删除该条数据吗？</main>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="show = false">取消</el-button>
                    <el-button type="primary" @click="DeleteUser()">确认</el-button>
                </span>
            </template>
        </el-dialog>
        <AddUser  ref="AddUserRef"/>
     </div>

</template>

<script>
import * as XLSX from 'xlsx';
import {Show,Deleteuser, } from '@/api/index/admin'
// import { ElMessage, ElMessageBox } from 'element-plus'
import { defineAsyncComponent } from 'vue'
const AddUser = defineAsyncComponent(() => import('../../components/affairs/add-user.vue'))

export default {
    components:{
        AddUser
    },
    data(){
        return {
            delIndex:'',
            show:false,
            loading: true,
            users:[],
            userid:'',
            major: '',
            // dialogFormVisible:false
        }
    },
    created(){
      this.load();
    },

    methods:{
        // 导出excel表格
        exportExcel() {
        const excelData = this.users.map((item) => ({
          '学号': item.id,
          '姓名': item.username,
          '激活状态': item.state,
          '手机号': item.phone,
          '学院': item.college,
          '专业': item.major,
        }));
        const ws = XLSX.utils.json_to_sheet(excelData);
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, '学生住宿信息');
        XLSX.writeFile(wb, '学生住宿信息.xlsx');
      },
        // 显示新增用户弹窗
        ShowAdduser(){
            this.$nextTick(() => {
            this.$refs.AddUserRef.showdialog();
        });
        },
        //获取所有用户信息
        load(){
            this.loading = true;
            Show().then(res=>{
            console.log(res)
            this.users=res.data.data;
            this.loading = false;
         })
        },
        //根据id或者学院查询对应的用户信息
        serch(){
            const params = {};
            if (this.userid) {
            params.id = this.userid;
            }
            if (this.major) {
            params.major = this.major;
            }
            Show(params).then(res=>{
            console.log(params)
            this.users=res.data.data;
        })},
        //删除对应行的数据
        DeleteUsers(index){
            console.log(index)
            this.delIndex=index;
            this.show=true;
        },
        DeleteUser(){
            console.log(this.delIndex)
            Deleteuser({id:this.delIndex.id}).then(res=>{
                console.log(res)
                if(res.data.code==200){
                    this.load();
                    this.show=false;
                }
                else{
                    alert("删除失败")
                    this.show=false;
                }
            })
        }
    }
}


</script>

<style scoped>

</style>